レーダー

レーダー チャートは、複数のデータ ポイントとそれらの間の変化を表示する方法です。

多くの場合、2 つ以上の異なるデータ セットのポイントを比較するのに役立ちます。

使用例

var myRadarChart = new Chart(ctx, {
    type: 'radar',
    data: data,
    options: options
});

データセットのプロパティ

レーダー チャートでは、データセットごとに多くのプロパティを指定できます。これらは、特定のデータセットの表示プロパティを設定するために使用されます。たとえば、線の色は一般的にこのように設定されます。

名前 タイプ スクリプト可能 インデックス可能 デフォルト
backgroundColor Color はい - 'rgba(0, 0, 0, 0.1)'
borderCapStyle string はい - 'butt'
borderColor Color はい - 'rgba(0, 0, 0, 0.1)'
borderDash number[] はい - []
borderDashOffset number はい - 0.0
borderJoinStyle string はい - 'miter'
borderWidth number はい - 3
hoverBackgroundColor Color はい - undefined
hoverBorderCapStyle string はい - undefined
hoverBorderColor Color はい - undefined
hoverBorderDash number[] はい - undefined
hoverBorderDashOffset number はい - undefined
hoverBorderJoinStyle string はい - undefined
hoverBorderWidth number はい - undefined
fill boolean|string はい - true
label string - - ''
order number - - 0
lineTension number - - 0
pointBackgroundColor Color はい はい 'rgba(0, 0, 0, 0.1)'
pointBorderColor Color はい はい 'rgba(0, 0, 0, 0.1)'
pointBorderWidth number はい はい 1
pointHitRadius number はい はい 1
pointHoverBackgroundColor Color はい はい undefined
pointHoverBorderColor Color はい はい undefined
pointHoverBorderWidth number はい はい 1
pointHoverRadius number はい はい 4
pointRadius number はい はい 3
pointRotation number はい はい 0
pointStyle string|Image はい はい 'circle'
spanGaps boolean - - undefined

全般的

名前 説明
label 凡例とツールヒントに表示されるデータセットのラベル。
order データセットの描画順序。

ポイントスタイリング

各ポイントのスタイルは、次のプロパティで制御できます。

名前 説明
pointBackgroundColor ポイントの塗りつぶしの色。
pointBorderColor ポイントの境界線の色。
pointBorderWidth ポイントの境界線の幅 (ピクセル単位)。
pointHitRadius マウス イベントに反応する非表示ポイントのピクセル サイズ。
pointRadius ポイントシェイプの半径。 0 に設定すると、ポイントはレンダリングされません。
pointRotation 点の回転 (度単位)。
pointStyle ポイントのスタイル。もっと...

これらすべての値がundefined、最初にデータセット オプションにフォールバックし、次に関連するオプションにフォールバックします。elements.point.*オプション。

ラインのスタイリング

線のスタイルは、次のプロパティで制御できます。

名前 説明
backgroundColor 線の塗りつぶしの色。
borderCapStyle ラインのキャップスタイル。見るMDN。
borderColor 線の色です。
borderDash ダッシュの長さと間隔。見るMDN。
borderDashOffset 破線のオフセット。見るMDN。
borderJoinStyle ラインジョイントスタイル。見るMDN。
borderWidth 線幅 (ピクセル単位)。
fill 線の下の領域を埋める方法。見る面グラフ
lineTension 線のベジェ曲線の張力。直線を描画するには 0 に設定します。
spanGaps true の場合、データがないか null のデータを持つ点の間に線が描画されます。 false の場合は、NaNデータにより行に切れ目が作成されます。

値がundefinedspanGaps関連するものへのフォールバックチャート構成オプション。残りの値は、関連する値にフォールバックされます。elements.line.*オプション。

インタラクション

各ポイントとの相互作用は、次のプロパティで制御できます。

名前 説明
pointHoverBackgroundColor ホバー時のポイントの背景色。
pointHoverBorderColor ホバーしたときのポイントの境界線の色。
pointHoverBorderWidth ホバー時のポイントの境界線の幅。
pointHoverRadius ホバー時のポイントの半径。

構成オプション

レーダー チャートは次の構成オプションを定義します。これらのオプションは、グローバル チャート構成オプションとマージされます。Chart.defaults.global、チャートに渡されるオプションを形成します。

名前 タイプ デフォルト 説明
spanGaps boolean false false の場合、NaN データにより行が中断されます。

スケールオプション

レーダー チャートは 1 つのスケールのみをサポートします。このスケールのオプションは、scale財産。 このスケールのオプションは、scaleプロパティから参照できます。リニアラジアル軸ページ。

options = {
    scale: {
        angleLines: {
            display: false
        },
        ticks: {
            suggestedMin: 50,
            suggestedMax: 100
        }
    }
};

デフォルトのオプション

作成されたすべてのレーダー チャートに構成設定を適用することが一般的です。グローバルレーダーチャート設定は次の場所に保存されます。Chart.defaults.radar。グローバル オプションを変更すると、変更後に作成されたグラフにのみ影響します。既存のチャートは変更されません。

データ構造

dataレーダー チャートのデータセットのプロパティは、数値の配列として指定されます。データ配列内の各点は、同じインデックスのラベルに対応します。

data: [20, 10]

レーダー チャートの場合、各ポイントが意味するコンテキストを提供するために、チャート内の各ポイントの周囲を示す文字列の配列が含まれます。

data: {
    labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
    datasets: [{
        data: [20, 10, 4, 2]
    }]
}

「」と一致する結果

    「」に一致する結果はありません